<template>
	<u-sticky h5-nav-height="0">
		<u-tabs font-size="28" :gutter="30" :list="tabsList" active-color="#117B12" :is-scroll="true"
			v-model="tabsCurrent" @change="tabsChange"></u-tabs>
	</u-sticky>
	<view class="u-p-28">
		<template v-for="(v,i) in list" :key="v.sid">
			<view class="bgw box-radius u-p-l-28 u-p-r-28 u-font-24">
				<view class="u-flex u-border-bottom u-p-t-20 u-p-b-20">
					<view class="u-flex-1">
						订单编号：{{v.orderCode}}
					</view>
					<view class="">
						<order-status-text v-model="v.orderStatus"></order-status-text>
					</view>
				</view>
				<template v-for="k in v.productList">
					<item :detail="k" type="order">
						<template v-slot:right>
							<view class="">
								x{{k.count}}
							</view>
						</template>
					</item>
				</template>

				<view class="u-flex u-p-b-14 u-p-t-14">
					<view class="u-flex-1 u-font-24">
						<text>合计：</text>
						<text class="color-primary">￥</text>
						<text class="color-primary u-font-32">{{v.price}}</text>
					</view>
					<!-- 订单状态：0=待支付，1=待发货，2=待收货，3=待评价，4=已完成 5=已取消 10=挂单 -->
					<u-button v-if="v.orderStatus == 1 || v.orderStatus == 2 || v.orderStatus == 3 || v.orderStatus == 4 || v.orderStatus == 5" @click="navLogin(`/pagesSub/editOrder/editOrder?sid=${v.sid}`)" size="mini" shape="circle"
						class="u-m-l-16 btn-grey">订单详情</u-button>
					<template v-if="v.orderStatus == 0">
						<u-button @click="navLogin(`/pagesSub/cancelOrder/cancelOrder?sid=${v.sid}`)" size="mini" shape="circle" class="u-m-l-16 btn-grey">取消订单</u-button>
						<u-button @click="navLogin(`/pagesSub/editOrder/editOrder?sid=${v.sid}`)" type="primary"
							size="mini" shape="circle" class="u-m-l-16">立即支付</u-button>
					</template>
					<template v-if="v.orderStatus == 2">
						<u-button @click="confirmOrder(v.sid,{},refreshList)" type="primary" size="mini" shape="circle" class="u-m-l-16">确认收货</u-button>
					</template>
					<template v-if="v.orderStatus == 3">
						<u-button @click="navLogin(`/pagesSub/orderEvaluate/orderEvaluate?sid=${v.sid}`)" type="primary" size="mini" shape="circle" class="u-m-l-16">去评价</u-button>
					</template>
					<template v-if="v.orderStatus == 4">
						<!-- <u-button @click="" size="mini" shape="circle" class="u-m-l-16 btn-grey">查看评价</u-button> -->
					</template>
					<template v-if="v.orderStatus == 10">
						<u-button @click="navLogin(`/pagesSub/waitOrder/waitOrder`)" type="primary" size="mini" shape="circle" class="u-m-l-16">去下单</u-button>
					</template>
				</view>
			</view>
			<u-gap height="20"></u-gap>
		</template>
		<g-loadmore :status="loadmoreStatus"></g-loadmore>
	</view>
</template>


<script setup>
	import mixinList from '@/common/js/mixinList.js';
	import mixinOrder from '@/common/js/mixinOrder.js';
	import orderRentItem from '@/pagesSub/components/order-rent-item.vue';
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin
	} = proxy.$util;
	const {
		total,
		current_page,
		page_size,
		last_page,
		apiPath,
		loading,
		list,
		searchParams,
		getList,
		getNextList,
		loadmoreStatus,
		searchClear,
		searchConfirm
	} = mixinList();
	const {
		confirmOrder,
		cancelOrder 
	} = mixinOrder();
	// status
	const props = defineProps({
		status: {
			type: String,
			default: '',
		}
	})
	apiPath.value = 'getOrder'
	const tabsCurrent = ref(0)
	// 0=待支付，1=待发货，2=待收货，3=待评价，4=已完成 5=已取消 10=挂单
	const tabsList = [{
			name: '全部',
			id: ''
		},
		{
			name: '待付款',
			id: 0
		},
		{
			name: '待发货',
			id: 1
		},
		{
			name: '待收货',
			id: 2
		},
		{
			name: '待评价',
			id: 3
		},
		{
			name: '已完成',
			id: 4
		},
		{
			name: '已取消',
			id: 5
		},
	];
	JSON.stringify()

	if (props.status) {
		let index = tabsList.findIndex(v => Number(props.status) === v.id)
		tabsCurrent.value = index;
	}
	searchParams.orderStatus = computed(() => {
		return tabsList[tabsCurrent.value].id
	});
	const refreshList = () => {
		getList(1)
	}
	watch(tabsCurrent, async (val) => {
		await getList(1)
	})
	const tabsChange = (index) => {}
	onReady(() => {

	})
	onLoad((d) => {
		getList(1)
	})
	onShow(() => {
		uni.$off('order_update');
		uni.$once('order_update', (v) => {
			getList(1)
		})
	})
</script>

<style lang="scss" scoped>

</style>